﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "库存变动历史";
}

<el-container>
    <avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
               v-on:refresh-change="refreshChange"
               v-on:row-save="handleRowSave"
               v-on:row-update="handleRowUpdate"
               v-on:row-del="handleRowDel"
               v-on:search-change="searchChange"
               v-on:search-reset="resetChange"
               :cell-style="cellStyle"
               v-on:on-load="onLoad">
        <template slot="record" slot-scope="scope">
            <modify-record :data="scope.row"></modify-record>
        </template>
    </avue-crud>
</el-container>

@section Scripts {
    <script>
        var changeTypesDic=[{ label:`${Vue.prototype.i18n.t('入库')}`, value: "IN" },{ label: `${Vue.prototype.i18n.t('出库')}`, value: "OUT" },]
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "inventoryHistory",
                    pageUrl: `/inventoryHistory/pages`,
                    addUrl: `/inventoryHistory/add`,
                    editUrl: `/inventoryHistory/update`,
                    deleteUrl: `/inventoryHistory/delete`,

                    option: {
                        searchShowBtn: Permissions.avePermission(`inventoryHistory:searchBtn`),
                        refreshBtn: Permissions.avePermission(`inventoryHistory:searchBtn`),
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        addBtn: false,
                        editBtn: false,
                        delBtn: false,
                        column: [
                           { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "productId", label: `${this.i18n.t('产品')}`, slot: true, span: 24,type:'select', search: true,dicUrl: "/product/list",props: { label: "productName", value: "id" }, hide: false, width: '220', clearable: true, },
                            { prop: "changeDate", label:`${this.i18n.t('变动时间')}`, slot: true, span: 24, search: true, hide: false, width: '220', clearable: true, },
                           { prop: "changeType", label:`${this.i18n.t('变动类型')}`, slot: true, span: 24, search: true,type:'select',dicData: changeTypesDic,props: { label: "label", value: "value" }, hide: false, width: '120', clearable: true, },
                           { prop: "quantity", label:`${this.i18n.t('变动数量')}`, slot: true, span: 24, search: true, hide: false, width: '100', clearable: true, },
                           { prop: "operator", label:`${this.i18n.t('操作人')}`, slot: true, span: 24, search: true, hide: false, width: '100', clearable: true, },
                           { prop: "currentStock", label:`${this.i18n.t('变动值')}`, slot: true, span: 24, search: true, hide: false, width: '100', clearable: true, },
                           { prop: "remark", label:`${this.i18n.t('备注')}`, slot: true, span: 24, search: true, hide: false, width: '100', clearable: true, },
                         ],
                    },

                }
            },
            created() {
                this.selectRow = {};
            },
            methods: {
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 4) {
                        if (row.changeType == "IN") {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
            }
        });
    </script>

}